<template>
<div class="login_container">
  <div class="loginColumns animated fadeInDown">
      <div class="row">
            <div class="col-md-6 welcome">
                <h2 class="font-bold">欢迎使用编码枪系统</h2>
                <p>本系统能够使你快速构建后台，减少程序员工作量</p>
            </div>
            <div class="col-md-6">
              <div class="registerTip">
                <h3>注册平台账户</h3>
                <p>创建账户以查看更多好玩功能</p>
              </div>
                <div class="ibox-content">
                  <el-form ref="registerFormRef" :rules="registerFormRules" :model="registerForm" label-width="0px" class="register_form">
                    <!-- 邮箱 -->
                    <el-form-item label="注册邮箱" prop="userEmail" label-width="80px">
                      <el-input
                        v-model="registerForm.userEmail"
                        prefix-icon="el-icon-s-cooperation" placeholder="请输入邮箱"
                      ></el-input>
                    </el-form-item>
                    <!-- 用户名 -->
                    <el-form-item label="注册用户" prop="userName"  label-width="80px">
                      <el-input
                        v-model="registerForm.userName"
                        prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                      ></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item label="注册密码" prop="password"  label-width="80px">
                      <el-input
                        type="password"
                        v-model="registerForm.password"
                        prefix-icon="el-icon-lock" placeholder="请输入密码"
                      ></el-input>
                      </el-form-item>
                      <!-- 确认密码 -->
                      <el-form-item label="确认密码" prop="comfirmPassword"  label-width="80px">
                      <el-input
                        type="password"
                        v-model="registerForm.comfirmPassword" placeholder="请再次输入密码"
                        prefix-icon="el-icon-lock"
                      ></el-input>
                     </el-form-item>
                      <button class="loginBtn" @click="register">注册</button>
                      <p class="haveAccount">已经有一个账号？</p>
                      <button class="loginBtn registerBtn" @click="login">登录</button>
                  </el-form>
                </div>
                
            </div>
        </div>
  </div>
</div>
      
</template>
<script>
export default {
     data() {
       // 校验邮箱的规则
        var checkEmail = (rule, value, cb) => {
          // 验证邮箱
          const regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
          if (regEmail.test(value)) {
            // 合法邮箱
            return cb()
          }
          cb(new Error('请输入合法的邮箱'))
        }
        return {
        // 登录表单的数据绑定对象
        registerForm: {
            userName: '',
            password: '',
            userEmail: '',
            comfirmPassword: ''
        },
        // 表单的验证规则对象
        registerFormRules: {
            userEmail: [
                { required: true, message: '请输入要注册的邮箱', trigger: 'blur' },
                { validator: checkEmail, trigger: 'blur' }
            ],
            userName: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入账号密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
            ],
            comfirmPassword: [
                { required: true, message: '请再次输入账号密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
            ]
        },
        // postData: ''
      // captcha: ''
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      // console.log(this); 表单实例对象
      this.$refs.loginFormRef.resetFields()
    },
    register() {
      // 注册预验证
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) return
        if (this.registerForm.password !== this.registerForm.comfirmPassword) {
          return this.$message.error('两次密码输入不一致，请重新输入')
        } else {
          const resUserEmail = await this.$http.post('/authority/pmUser/validateEmail',this.registerForm.userEmail,{headers: {"Content-Type": "application/json"}})
          // console.log(resUserEmail)
          if (resUserEmail.data == "error") return this.$message.error('您所输入的邮箱已经被注册！')
          const resUserName = await this.$http.post('/authority/pmUser/validateUserName',this.registerForm.userName,{headers: {"Content-Type": "application/json"}})
          if (resUserName.data == "error") return this.$message.error('您所输入的用户名已经被注册！')
          const res = await this.$http.post('/authority/pmUser/register', this.registerForm)
          if (res.status !== 200) return this.$message.error('注册失败')
          else this.$message.success('注册成功')
          this.$router.push('/login')
        }
        return false
        // if (res.data.type !== 'success') return this.$message.error('登陆失败')
        // else this.$message.success('登陆成功')
        // 1．将登录成功之后的 token，保存到客户端的sessionstorage中
        // 1.1项目中出了登录之外的其他API接口，必须在登录之后才能访问
        // 1.2 token 只应在当前网站打开期间生效，所以将 token保存在 sessionStorage中
        // window.sessionStorage.setItem('token', res.data.token)
        // 页面跳转
        // this.$router.push('/Index')
      })
    },
    login() {
        this.$router.push('/login')
    }
    // async getCaptcha() {
    //   const res =await this.$http.get('/sysLogin/captcha.jpg',{responseType: 'blob'})
    //   this.captcha = window.URL.createObjectURL(res.data)
    // },

},
}
</script>
<style lang="less" scoped>
    .login_container {
  height: 100%;
  width: 100%;
  background-color: #F3F3F4;
  .loginColumns {
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px 20px 20px;
    .welcome {
        color: #676a6c;
        .font-bold {
            font-weight: 600;
            font-family: inherit;
            font-size: 24px;
          }
    }
    .registerTip {
      color: #676a6c;
      margin-left: 25px;
      h3 {
        font-size: 16px;
        font-weight: 600;
      }
      p {
        font-size: 13px;
      }
    }
  }
}
.login_container::before {
  content:"";
  display:table;
}
.ibox-content {
  clear: both;
  color: inherit;
  padding: 15px 20px 20px 20px;
}
.loginBtn {
  width: 100%;
  height: 26px;
  border-radius: 3px;
  line-height: 0px;
  color: #fff;
  background-color: #1BB394;
  font-size: 13px;
  border: none;
}
.registerBtn {
  color: #8A8C8E;
  background-color: #FFFFFF;
  border-color: #D2D2D2;
  border: 1px solid #ccc;
}
.haveAccount {
  width: 100%;
  height: 20px;
  margin-top: 15px;
  color: #888888;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
</style>